<template>
  <div class="province-city">
  {{title}},{{provinceCode}},{{cityCode}}
    <el-form-item class="page-form-item" label="所属省" prop="status">
        <el-select v-model="province" placeholder="请选择" @change="provinceChanged">
            <el-option
              :key="''"
              :label="'全部'"
              :value="''">
            </el-option>
            <el-option
              v-for="item in provinces"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item class="page-form-item" label="市" prop="status">
        <el-select v-model="city"
            :loading="loadingCity"
            @change="cityChanged"
            placeholder="请选择">
            <el-option
              :key="''"
              :label="'全部'"
              :value="''">
            </el-option>
            <el-option
              v-for="item in cities"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
        </el-select>
    </el-form-item>
  </div>
</template>
 
<script type="text/javascript">
  import provinceCity from '@static/json/provinceCity.json'
  export default {
    name: 'provinceCity',
    props: {
      provinceCode: {
        type: String,
        default: ''
      },
      cityCode: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      data() {
        return {
          secSelect: ''
        }
      }
    },
    data() {
      val: ''
    },
    created() {
      console.log('created')
      this.provinces = provinceCity.provinces
    },
    computed: {
 
    },
    /*****
    watch: {
      provinceCode(newVal, oldVal) {
          this.provinceCode = newVal
          this.provinceChanged(newVal)
      },
      cityCode(newVal, oldVal) {      //  监听解决第一次点击编辑回显的问题----还是有问题
        console.log('new',newVal,'old',oldVal)
        const _this = this
        var val= ''
          if(newVal == '' && oldVal != '') {
             val = oldVal
          } else if(newVal != ''){
             val = newVal
          }
          this.$emit('changeCityCode',val)
      }
    },
    *****/
    
    mounted() {
      console.log('mounted')
      this.province = this.provinceCode
      this.provinceChanged(this.provinceCode)
      this.city = this.cityCode
    },
    data() {
      return {
        loadingCity: false,
        province: '',
        city: '',
        provinces: [],
        cities: []
      }
    },
    methods: {
      provinceChanged(value) {
        if (value !== '') {
          this.loadingCity = true
          for (var item of this.provinces) {
            if (item.code === value) {
              this.cities = item.cities
              this.city = ''
             // this.city = this.cityCode?this.cityCode:''        //  第一次点击编辑的时候-市为空的bug解决
              this.loadingCity = false
              break
            } else {
              continue
            }
          }
        } else {
          this.cities = []
          this.city = ''
        }
        this.$emit('selectChange', this.province, this.city)    //  子--->父
      },
      cityChanged(value) {
        this.$emit('selectChange', this.province, this.city)
      },
      resetProviceCity(province, city) {
        this.cities = []
        if (province && city) {
          this.province = province
          this.provinceChanged(this.province)
          this.city = city
        } else {
          this.province = ''
          this.city = ''
        }
      }
    }
  }
</script>
 